<template>
  <div>
    <mt-swipe style="height:230px;" :auto="4000">
      <mt-swipe-item>
        <img src="../assets/1.jpg">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/1.jpg">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/1.jpg">
      </mt-swipe-item>
    </mt-swipe>
    <!-- <mt-header fixed title="首页"></mt-header> -->
    <mt-header fixed title="首页">
        <mt-button slot="right">
            <router-link to="/search">搜索</router-link>
        </mt-button>
    </mt-header>
    <div class="fenlei">
      <img src="../assets/nav1.png">
      <img src="../assets/nav2.png">
      <img src="../assets/nav3.png">
      <img src="../assets/nav4.png">
      <img src="../assets/nav5.png">
      <img src="../assets/nav2.png">
    </div>
    <ul class="detail-content">
      <li v-for="(item,index) in goodList " :key="index" class="detail1">
        <img :src="item.img">
        <h4>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h4>
        <span>￥{{item.now}}&nbsp;<del>￥{{item.del}}</del></span>
        <button @click="jump(index+1)" class="mint-button btn mint-button--primary mint-button--small">
        立即购买
        </button>
      </li>
    </ul>
    <mt-tabbar class="footer" fixed>
      <mt-tab-item id="index" class="active">
        <img src="../assets/icon2.png" slot="icon">
        <router-link to="/">首页</router-link>
      </mt-tab-item>
      <mt-tab-item id="sort">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/sort">分类</router-link>
      </mt-tab-item>
      <mt-tab-item id="shoppingCar">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/shoppingCar">购物车</router-link>
      </mt-tab-item>
      <mt-tab-item id="member">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/member">会员中心</router-link>
      </mt-tab-item>
    </mt-tabbar>
    <router-view/>
  </div>
</template>

<script>
export default {

  data () {
    return {
      goodList: [
        {img: require('../assets/1.jpg'), now: '560.00', del: '1880.00'},
        {img: require('../assets/1.jpg'), now: '560.00', del: '1880.00'},
        {img: require('../assets/1.jpg'), now: '560.00', del: '1880.00'},
        {img: require('../assets/1.jpg'), now: '560.00', del: '1880.00'},
        {img: require('../assets/1.jpg'), now: '560.00', del: '1880.00'},
        {img: require('../assets/1.jpg'), now: '560.00', del: '1880.00'},
        {img: require('../assets/1.jpg'), now: '560.00', del: '1880.00'}
      ]
    }
  },

  methods: {
    jump (id) {
      this.$router.push({name: 'pay', params: {id: id}})
    }
  },

  created () {
  }
}
</script>

<style lang="less">
.mint-swipe,
.mint-swipe-item {
  width: 100%;
  height: 230 / 16rem;
}
.footer a,
.mint-header a {
  color: white;
  text-decoration: none;
}
ul {
  padding-inline-start: 0;
}
li {
  list-style: none;
}
.mint-swipe-item img {
  width: 100%;
  height: 230 / 16rem;
}
.fenlei {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding-top: 10 / 16rem;
  margin-bottom: 20 / 16rem;
}
.fenlei img {
  width: 33%;
}
.detail-content {
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 70 / 16rem;
}
.detail1 {
  margin-top: 20 / 16rem;
  width: 46%;
  margin: 2%;
  box-shadow:0 0 5 / 16rem #888;
  text-align: center;
}
.detail1 img {
  width: 100%;
}
.detail-content h4 {
 font-size: 14 / 16rem;
 font-weight: 400;
 color: #888;
 margin: 0;
}
.detail1 span {
  color: red;
  margin-top: 10 / 16rem;
  font-size: 14 / 16rem;
}
.detail1 del {
  color: black;
}
button {
  margin: 20 / 16rem;
}
.mint-tabbar {
  background-color: #0094ff;
}
.active a {
  color: orange;
}
</style>
